<template>
  <view class="tab" :class="{ active, inactive: !active }" :style="shouldShow ? '' : 'display: none;'"><slot v-if="shouldRender"></slot></view>
</template>

<script>
export default {
  props: {
    dot: {
      type: Boolean
    },
    info: {
      type: null
    },
    name: {
      type: [Number, String],
      value: ''
    }
  },
  inject: ['tabs'],

  data() {
    return {
      active: false,
      shouldShow: false,
      shouldRender: false,
      inited: null
    };
  },
  created() {
    this.tabs.childrens.push(this);
  },
  mounted() {
    this.update();
  },
  methods: {
    updateRender(value, parent) {
      // let parentData = parent;
      this.inited = this.inited || value;
      this.active = value;
      this.shouldRender = this.inited;
      this.shouldShow = value;
    },
    update() {
      if (this.tabs) {
        this.tabs.updateTabs();
      }
    }
  },
  computed: {
    changeData() {
      const { dot, info } = this;
      return {
        dot,
        info
      };
    }
  },
  watch: {
    changeData(value) {
      this.update();
    },
    name(value) {
      this.update();
    }
  }
};
</script>

<style>
.tab.active {
  height: auto;
}

.tab.inactive {
  height: 0;
  overflow: visible;
}
</style>
